<template>
  <div class="classDetail">
    <div
      class="detail-head"
      :style="{backgroundImage: 'url(' + classinfo.classImg + ')', backgroundSize:'100% 250%', backgroundRepeat: 'no-repeat',backgroundPosition:'center'}"
    ></div>
    <div class="bgdec">
      <div class="titlewrapper">
        <div class="class-title">{{classinfo.className}}</div>
        <div class="otherwrapper">
          <div class="teacher"
            :style="{backgroundImage: 'url(' + classinfo.teacherIcon + ')', backgroundSize:'100%', backgroundRepeat: 'no-repeat',backgroundPosition:'center'}"></div>
          <div class="name">{{classinfo.teacherName}}</div>
          <div class="degree">级别： {{classinfo.classLevel}}</div>
          <div class="time">时长： {{classinfo.classTime}}分钟</div>
          <div class="people">学习人数： {{classinfo.studynum}}</div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="tab">
        <div class="detail-container" @click="handleAllClick">
          <div class="borders">{{classinfo.introduction}}</div>
          <div class="borders" v-for="(item,i) of classinfo.content" :key="i">
            <div class="chapters">
              <span>{{item.cid}}、{{item.chaptersNo}}</span>
              <span>{{item.chaptersName}}</span>
              <el-button type="danger" round :data-chapter="11">删除章节</el-button>
              <el-button round>插入章节</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 增加章节表单 -->
    <el-dialog title="新增章节" :visible.sync="dialogFormVisible" width='400px'>
      <el-form :model="form" label-position="top" @submit.native.prevent>
        <el-form-item label="章节名称">
          <el-input v-model="form.chaptersName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="章节文件">
          <el-upload
            class="upload-demo"
            drag
            action=""
            :auto-upload = "autoUpload"
            :http-request= 'uploadFile'>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addChapter">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const uploadImg = require('smms')
export default {
  name: 'editChapter',
  data () {
    return {
      classinfo: null,
      dialogFormVisible: false,
      form:{
        classNo: '',
        chaptersName: '',
        chaptersContent: '',
        cid: ''
      },
      autoUpload: false
    }
  },
  inject:['reload'],
  methods: {
    handleAllClick (e) {
      let item = e.target.dataset.chapter
      console.log(e.target.dataset)
      
      switch(e.target.innerHTML){
        case '删除章节':
          console.log(item)
          // this.deletewarning(item)
          break;
        case '插入章节':
          this.dialogFormVisible = true
          break;
        default: break
      }
    },
    getEditChapter () {
      let classNo = this.$route.query.classNo
      this.common.sendajax(classNo).then((data) => {
        this.classinfo = data
        console.log(this.classinfo)
      })    
    },
    deletewarning (item) {
      this.$confirm('此操作将永久删除该章节, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let path = this.ports.classDetail.deleteChapter + '/' + item
        this.http.delete(path,res => {
          if(res.status === 200 && res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.reload()
          } else {
            this.$message({
              type: 'info',
              message: '删除失败，请稍后重试!'
            })
          }
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })        
      })
    },
    addChapter () {
      this.form.classNo = this.$route.query.classNo
      console.log(this.form);
    },
    uploadFile(e) {
      console.log(e)
      
    }
  },
  mounted: function () {
    this.getEditChapter()
  },
}
</script>

<style lang="scss" scoped>
.classDetail {
  color: red;
  overflow-x: hidden;
}
.detail-head {
  width: 100%;
  height: 200px;
  position: relative;
  padding: 1px;
  overflow: hidden;
}
.detail-head:after {
  content: "";
  width: 100%;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  background: inherit;
  z-index: 2;
  filter: blur(10px);
}
.bgdec {
  width: 100%;
  height: 202px;
  background-image: linear-gradient(
    to right,
    rgba(28, 31, 33, 0.9),
    rgba(28, 31, 33, 0)
  );
  z-index: 3;
  position: absolute;
  left: 0;
  top: 1.2rem;
}
.titlewrapper {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
}
.otherwrapper {
  width: 550px;
  height: 80px;
  font-size: 14px;
  color: #fff;
  line-height: 80px;
  display: flex;
  justify-content: space-between;
}
.class-title {
  margin: 8px 0;
  line-height: 48px;
  font-size: 32px;
  color: #fff;
  text-align: left;
}
.teacherwrapper {
  width: 150px;
  margin-right: 1rem;
}
.teacher {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #fff;
}
.name {
  width: auto;
  font-weight: 700;
  margin-left: -30px;
}
.container {
  width: 1000px;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.tab {
  width: 800px;
  height: auto;
  padding:30px 0;
}
.chapters {
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  color: black;
  border-radius: 6px;
  padding: 0 10px;
  .el-button{
    margin-left: 20px;
    float: right;
  }
}
.el-icon-plus{
  font-size: 40px;
  color: #5e5e5e;
  width: 40px;
  display: block;
  margin: 0 auto;
}

.el-form-item{
  label{
    display: block;
  }
}
// .upload-demo{
//   display: flex;
//   justify-content: center;
// }
</style>
